<template>
    <div class="home">
        <nav-bar class="nav" :userData="userData"></nav-bar>
<!--        滚动标签页-->
        <van-tabs v-model="active" sticky swipeable>
            <!--        轮播图-->
            <div class="lunboutu">
                <van-swipe class="my-swipe" :autoplay="3000"
                           indicator-color="white">
                    <van-swipe-item><img src="~assets/img/1.webp" alt=""></van-swipe-item>
                    <van-swipe-item><img src="~assets/img/2.webp" alt=""></van-swipe-item>
                    <van-swipe-item><img src="~assets/img/3.webp" alt=""></van-swipe-item>
                    <van-swipe-item><img src="~assets/img/4.webp" alt=""></van-swipe-item>
                    <van-swipe-item><img src="~assets/img/5.webp" alt=""></van-swipe-item>
                </van-swipe>
            </div>
            <!--            按钮app-->
            <div class="button"><a href="http://d.bilibili.com/download_app.html?preUrl=http%3A%2F%2Fm.bilibili.com%2Fvideo%2Fav796450032.html&schema=bilibili%3A%2F%2Fvideo%2F796450032%3Fpage%3D0&h5awaken=cHZpZD0wN0MxNjIyMi1BQ0IyLTRDQUEtOEZCMS1CMkYxRTQ3MjMzNDMxNTU4MTFpbmZvY183OTY0NTAwMzJfMTU5NTI0NTU5MDQ0NiZ1YT1Nb3ppbGxhJTJGNS4wJTIwKGlQaG9uZSUzQiUyMENQVSUyMGlQaG9uZSUyME9TJTIwMTFfMCUyMGxpa2UlMjBNYWMlMjBPUyUyMFgpJTIwQXBwbGVXZWJLaXQlMkY2MDQuMS4zOCUyMChLSFRNTCUyQyUyMGxpa2UlMjBHZWNrbyklMjBWZXJzaW9uJTJGMTEuMCUyME1vYmlsZSUyRjE1QTM3MiUyMFNhZmFyaSUyRjYwNC4xJmlzQXV0b09wZW49ZmFsc2UmYnNvdXJjZT1zZWFyY2hfc291Z28mJm9wZW5fYXBwX2Zyb21fdHlwZT1oNSZvcGVuX2FwcF91dWlkPUM5QTJBQjZBLUE4QUItNTNBNy01NTcxLURBMzVFRkUwMzZGNDEyMjk0aW5mb2Mmb3Blbl9hcHBfZ3JvdXBpZD0xJm9wZW5fYXBwX3VybD1odHRwcyUzQSUyRiUyRm0uYmlsaWJpbGkuY29tJTJGdmlkZW8lMkZCVjE3QzR5MWI3ZHkmb3Blbl9hcHBfYWRkaXRpb249JTdCJTIyc3BtaWQlMjIlM0ElMjIzMzMuNDAxLmNsaWNrLnBsYXllciUyMiUyQyUyMmdyb3VwX2lkJTIyJTNBMCU3RA%3D%3D">
                <img src="~assets/img/BILIBILI_LOGO2.png" alt="">打开App，看你感兴趣的视频
            </a></div>
            <van-tab v-for="(item,index) in tabLists" :title="item.title" :key="index">
                    <van-list
                            :immediate-check="false"
                            v-model="item.loading"
                            :finished="item.finished"
                            finished-text="我也是有底线的"
                            @load="onLoad"
                    >
                        <div class="itemDiv">
                            <detail class="divContent" :itemDetail="itemDetail"
                                    v-for="(itemDetail,indexDetail) in item.list"
                                    :key="indexDetail"></detail>
                        </div>
                    </van-list>
            </van-tab>
        </van-tabs>

    </div>
</template>

<script>
    import NavBar from 'components/common/User/navbar'
    import Detail from 'components/common/Home/detail'
    import {mapState} from 'vuex'
    import Vue from 'vue'
    export default {
        components:{
            NavBar,
            Detail
        },
        data(){
            return{
                tabLists:[],
                active:0,
            }
        },
        computed:{
            ...mapState(['userData',"pageY"])
        },
        methods:{
            getData(){
                this.$store.commit('getData')
            },
            async getTabList(){
                const {data:res} = await this.$http.get('/category')
                this.setContentList(res)
            },
            setContentList(data){
                const tabsLists = data.map((item,index) => {
                    item.list = []
                    item.page = 0
                    item.pagesize = 10
                    item.finished = false
                    item.loading = false
                    return item
                })
                this.tabLists = tabsLists
                this.getContentList()
            },
            async getContentList(){
                const contentItem = this.getId()
                const {data:res} = await this.$http.get(`/detail/${contentItem._id}`,{
                    params:{
                        page:contentItem.page,
                        pagesize:contentItem.pagesize
                    }
                })
                contentItem.list.push(...res)
                contentItem.loading = false
                if (res.length < contentItem.pagesize){
                    contentItem.finished = true
                }
            },
            getId(){
                const contentItem = this.tabLists[this.active]
                return contentItem
            },
            onLoad(){
                console.log("到达底部");
                const contentItem = this.getId()
                contentItem.page+=1
                this.getContentList()
            },
        },
        watch:{
            active(){
                this.getContentList()
            },
        },
        created() {
            this.getData()
            this.getTabList()
            console.log(this.$route);
        },

    }
</script>

<style scoped lang="less">
    .home{
        background-color: white;
    }
    .itemDiv{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-top: 1.613vw;
        .divContent{
            margin: 12.903vw 0;
            margin-top: 0;
            width: 46%;


        }
    }
    .lunboutu{
        text-align: center;
        margin-top: 3.226vw;
        img{
            width: 95%;
            height: 45.161vw;
            border-radius: 0.968vw;
        }
    }
    .detail{
        border-radius: 3.226vw;
    }
    .button{
        height: 9.6vw;
        width: 93.6vw;
        background: #fb7299;
        border: none;
        border-radius: 4.8vw;
        font-size: 3.83333vw;
        text-align: center;
        margin-bottom: 3.226vw;
        position: fixed;
        z-index: 99999;
        left: 3.871vw;
        bottom: 2%;
        a{
            color: #fff;
        }
        img{
            width: 12.903vw;
            margin-right: 6.452vw;
            margin-top: 2.403vw;
            vertical-align: -35%;
        }
    }


</style>